<template>
	<view>
		<view class="box">
			<view style="height: 160rpx;width: 100%;"></view>
			<view class="title">你好，</view>
			<view class="title">欢迎来到飞驰代驾</view>

			<view class="mobile">
				<text class="jia">+86</text>
				<text class="shu"></text>
				<input v-model="mobile" type="text" name="" id="" placeholder="请输入手机号码">
			</view>
			<view class="hint">未注册手机号验证后自动创建账户</view>

			<view class="view_item">
				<view class="yzm">
					<input v-model="code" type="number" placeholder="输入验证码">
					<text @click="getCode">{{getCodeText}}</text>
				</view>
			</view>

			<view class="wxLogin" @click="login">
				登录
			</view>

			<view class="wxLogin" @click="wxLogin">
				<image src="../../static/vx.png" mode=""></image>
				微信一键登录
			</view>

			<view class="footer center">
				<image src="../../static/checked.png" class="img" mode=""></image>
				<view>阅读并同意<text>《用户协议》</text>和<text>《隐私协议》</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				getCodeText: '获取验证码',
				getCodeisWaiting: false,
				radio: false
			}
		},

		methods: {
			wxLogin() {
				uni.getUserProfile({
					desc: "用于完善用户信息",
					success: (res) => {
						console.log(res, "微信登录", res.userInfo)
						setTimeout(() => {
							this.getWxCode(res.encryptedData, res.userInfo.nickName, res.userInfo
								.avatarUrl);
						}, 400)
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							icon: "none",
							title: '用户拒绝获取'
						})
					}
				})
			},
			getWxCode(data, name, avatar) {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log(loginRes, "code")
						this.$http('user/getOpenid', {
							code: loginRes.code,
							type: 1
						}, "POST").then(data => {
							this.getLogin(data.unionid, name, avatar, data.openid)
						}).catch(data => {

						})
					},
				});
			},
			getLogin(unionid, name, avatar, openid) {
				this.$http('user/wxlogin', {
					openid: openid,
					postion: 1
				}, "POST").then(data => {
					console.log(data,'DDDDDDDDDDDDDDDDDD')
					uni.setStorageSync('token', data.userinfo.token)
					uni.setStorageSync('userInfo', data.userinfo)
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/home/index'
						})
					}, 500)
				}).catch(data => {

				})
			},
			login() {
				if (this.mobile == '') {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
				} else if (this.code == '' || this.code != '8888') {
					uni.showToast({
						title: '验证码不正确',
						icon: "none"
					});
				} else {
					this.$http('user/mobilelogin', {
						mobile: this.mobile,
						postion: 1,
						captcha: this.code
					}, "POST").then(data => {
						uni.showToast({
							title: '登录成功',
						})
						uni.setStorageSync('token', data.userinfo.token)
						uni.setStorageSync('userInfo', data.userinfo)
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/home/index'
							})
						}, 500)
					}).catch(data => {

					})
				}
			},
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				//示例用定时器模拟请求效果
				// this.$api.getCode({
				// 	mobile: this.form.mobile,
				// 	event: 'mobilelogin'
				// }).then(res => {
				// 	this.$utils.showToast(res.msg)
				// 	if (res.code == 1) {
				// 		this.setTimer(); //调用定时器方法
				// 	}
				// })
				this.setTimer(); //调用定时器方法
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	.box {
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		overflow: hidden;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 80rpx;
			margin-left: 48rpx;
		}

		.mobile {
			width: 94%;
			margin: auto;
			margin-top: 147rpx;
			height: 80rpx;
			background: #F8F8F8;
			border-radius: 40rpx;

			.jia {
				display: inline-block;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 80rpx;
				margin: 0 29rpx 0 43rpx;
			}

			.shu {
				display: inline-block;
				width: 2rpx;
				height: 53rpx;
				background: #F1F1F1;
			}

			input {
				display: inline-block;
				width: 70%;
				position: relative;
				top: 12rpx;
				left: 22rpx;
			}
		}

		.hint {
			margin-top: 22rpx;
			margin-left: 59rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 27rpx;
		}

		.view_item {
			width: 90%;
			margin: auto;
			margin-top: 40rpx;

			.yzm {
				width: 100%;
				height: 80rpx;
				margin-top: 24rpx;
				background: #F6F6F6;
				border-radius: 40rpx;

				input {
					display: inline-block;
					width: 60%;
					padding: 0 30rpx;
					position: relative;
					top: 5px;
				}

				text {
					display: inline-block;
					margin-top: 17rpx;
					color: #014495;
					text-align: center;
					line-height: 56rpx;
				}
			}
		}

		.wxLogin {
			width: 653rpx;
			height: 80rpx;
			margin: auto;
			margin-top: 114rpx;
			background: #06C261;
			border-radius: 40rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				vertical-align: middle;
			}

			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}

		.footer {
			width: 100%;
			position: fixed;
			bottom: 60rpx;
			font-size: 24rpx;

			image {
				width: 25rpx;
				height: 25rpx;
			}

			text {
				color: #014495;
			}
		}
	}
</style>
